<!-- 索引过滤 -->
<template>
  <a-dropdown v-model:open="open" :trigger="['click']" :get-popup-container="(triggerNode: any) => triggerNode.parentNode">
    <div class="index-filter-wrap">
      <p>
        <span>{{ title }}</span>
      </p>
      <p v-if="computedValue.show" class="elliptical-1">{{ computedValue.v1 }}-{{ computedValue.v2 }}</p>
    </div>
    <template #overlay>
      <div class="index-sizer-wrap">
        <div class="index-sizer-placeholder">{{ placeholder }}</div>
        <div class="index-sizer-operate-wrap">
          <div class="index-sizer-input-wrap">
            <a-input-number v-model:value="indexValue.v1" :precision="0" :controls="false" :min="1" class="w-66 index-sizer-input" />
            <div class="index-sizer-input-line"></div>
            <a-input-number v-model:value="indexValue.v2" :precision="0" :controls="false" :min="1" class="w-66 index-sizer-input" />
          </div>
          <div class="index-sizer-btn-wrap">
            <a-button type="primary" size="small" @click="handleInquire">查询</a-button>
            <a-button type="text" size="small" @click="handleReset">重置</a-button>
          </div>
        </div>
      </div>
    </template>
  </a-dropdown>
</template>

<script setup lang="ts">
  import { message } from 'ant-design-vue'
  import { computed, onUnmounted, ref, watch } from 'vue'

  export type IndexFilterValue = [number | undefined, number | undefined]

  export interface IndexFilterProps {
    // 标题
    title?: string
    placeholder?: string
    // 值
    value: IndexFilterValue
  }
  const props = withDefaults(defineProps<IndexFilterProps>(), {
    title: '序号',
    placeholder: '请输入筛选序号',
    value: () => [undefined, undefined]
  })

  const emits = defineEmits<{
    (key: 'update:value', value: IndexFilterValue): void
    (key: 'reset', value: IndexFilterValue): void
    (key: 'inquire', value: IndexFilterValue): void
  }>()

  const computedValue = computed(() => {
    let v1 = props.value[0]
    let v2 = props.value[1]

    if (!v1 || !v2) {
      return {
        show: false,
        v1: undefined,
        v2: undefined
      }
    }

    if (v1 > v2) {
      const temp = v1
      v1 = v2
      v2 = temp
    }
    return {
      show: v1 !== undefined || v2 !== undefined,
      v1,
      v2
    }
  })

  const open = ref(false)
  const indexValue = ref({
    v1: props.value[0],
    v2: props.value[1]
  })

  // 查询
  const handleInquire = () => {
    const v1 = indexValue.value.v1
    const v2 = indexValue.value.v2

    if (!v1 || !v2) {
      message.error('序号不能为空')
      // emits('update:value', [undefined, undefined])
      // emits('inquire', [undefined, undefined])
      // open.value = false
      // indexValue.value.v1 = undefined
      // indexValue.value.v2 = undefined

      return
    }

    if (v1 > v2) {
      const temp = v1
      indexValue.value.v1 = v2
      indexValue.value.v2 = temp
    }
    emits('update:value', [indexValue.value.v1, indexValue.value.v2])
    emits('inquire', [indexValue.value.v1, indexValue.value.v2])
    open.value = false
  }

  // 重置
  const handleReset = () => {
    Object.assign(indexValue.value, {
      v1: undefined,
      v2: undefined
    })
    emits('update:value', [undefined, undefined])
    emits('reset', [undefined, undefined])
    open.value = false
  }

  const stopWatch = watch(
    () => props.value,
    value => {
      Object.assign(indexValue.value, {
        v1: value[0],
        v2: value[1]
      })
    }
  )

  onUnmounted(() => {
    stopWatch()
  })
</script>

<style lang="less" scoped>
  .index-filter-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 12px;
    width: 132px;
    height: 32px;
    font-size: 14px;
    color: @text01;
    border: 1px solid @border2;
    border-radius: 2px;
    font-weight: 400;
    line-height: 22px;
    gap: 6px;
    cursor: pointer;

    > p {
      white-space: nowrap;

      span {
        word-wrap: normal;
        color: @text04;
      }
    }
  }

  .index-sizer-wrap {
    width: 272px;
    background: #fff;
    border: 1px solid @border2;
    border-radius: 4px;
    box-shadow: 0 1px 3px 0 rgba(37, 37, 45, 0.14), 0 2px 8px 0 rgba(37, 37, 45, 0.14);

    .index-sizer-placeholder {
      display: flex;
      align-items: center;
      padding: 0 12px;
      width: 100%;
      height: 28px;
      font-size: 12px;
      color: @text03;
      font-weight: 400;
      line-height: 20px;
      border-bottom: 0.5px solid @border1;
    }

    .index-sizer-operate-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 12px 6px;

      .index-sizer-input-wrap {
        display: flex;
        align-items: center;
        gap: 1px;

        .index-sizer-input-line {
          width: 12px;
          height: 1px;
          background: @border1;
        }
      }

      .index-sizer-btn-wrap {
        display: flex;
        gap: 8px;

        .index-sizer-btn-wrap {
          display: flex;
          gap: 8px;
        }
      }
    }
  }

  .index-sizer-input {
    border-radius: 2px !important;
  }
</style>
